import { memo, useState } from "react";
import { Indicator } from "../../base-ui/indicator";
import { DemoWrapper } from "./style";

export const Demo = memo(
    (props) => {
        const names = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'hhh', 'iii']
        const [index, setIndex] = useState(0);
        const toggleIndex = (isNext) => {
            let newIndex = index
            if (isNext)
            {
                newIndex += 1;    
            }
            else {
                newIndex -= 1;
            }

            if (newIndex > names.length - 1) newIndex = 0;
            else if (newIndex < 0) newIndex = names.length - 1;

            setIndex(newIndex);
        }
        return (
            <DemoWrapper>
                <div className="control">
                    <button onClick={()=>toggleIndex(false)}>上一个</button>
                    <button onClick={()=>toggleIndex(true)}>下一个</button>
                </div>
                <div className="list">
                    <Indicator selectIndex={index}>
                    {
                        names.map(item => {
                            return (
                                <button key={item} className="item">
                                    { item}
                                </button>
                            )
                        })
                    } 
                </Indicator>
               </div>
            </DemoWrapper>
        )
    }
)